<template>
  <el-aside width="220px" class="sidebar">
    <div class="system-title">
      <h1 class="platform-name">在线教育考试平台</h1>
    </div>
    
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/main/home">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </el-menu-item>
      <el-submenu index="/main/question-bank"> <!-- 修正题库管理路径 -->
  <template #title>
    <i class="el-icon-document"></i>
    <span>题库管理</span>
  </template>
  <el-menu-item index="/main/question-bank/category"> <!-- 子菜单路径 -->
    <i class="el-icon-folder-opened"></i>
    <span>题目分类</span>
  </el-menu-item>
  <el-menu-item index="/main/question-bank/list">
    <i class="el-icon-tickets"></i>
    <span>题目列表</span>
  </el-menu-item>
</el-submenu>
      <el-submenu index="/main/paper-manage">
        <template #title>
        <i class="el-icon-files"></i>
        <span>试卷管理</span>
        </template>
        <el-menu-item index="/main/paper-manage/list">
        <i class="el-icon-tickets"></i>
        <span>试卷列表</span>
      </el-menu-item>
      </el-submenu>
      <el-submenu index="/main/exam-manage">
<template #title>
  <i class="el-icon-notebook-2"></i>
  <span>考试管理</span>
</template>
<el-menu-item index="/main/exam-manage/list">
  <i class="el-icon-document"></i>
  <span>考试列表</span>
</el-menu-item>
<el-menu-item index="/main/exam-manage/approval">
  <i class="el-icon-check"></i>
  <span>考试审批</span>
</el-menu-item>
<el-menu-item index="/main/exam-manage/monitor">
  <i class="el-icon-monitor"></i>
  <span>考试监控</span>
</el-menu-item>
</el-submenu>
      <el-menu-item index="/main/student-manage">
        <i class="el-icon-user"></i>
        <span>考生管理</span>
      </el-menu-item>
      <el-submenu index="/main/statistics">
        <template #title>
        <i class="el-icon-data-line"></i>
        <span>统计分析</span>
        </template>
        <el-menu-item index="/main/statistics/exam">
        <i class="el-icon-tickets"></i>
        <span>考试分析</span>
      </el-menu-item>
      <el-menu-item index="/main/statistics/paper">
        <i class="el-icon-tickets"></i>
        <span>试卷分析</span>
      </el-menu-item>
      </el-submenu>
      <el-submenu index="/main/system">
        <template #title>
        <i class="el-icon-setting"></i>
        <span>系统管理</span>
        </template>
        <el-menu-item index="/main/system/safe">
          <i class="el-icon-setting"></i>
        <span>安全设置</span>
      </el-menu-item>
      </el-submenu>
      <el-submenu index="/main/person">
        <template #title>
        <i class="el-icon-user"></i>
        <span>个人中心</span>
        </template>
        <el-menu-item index="/main/person/message">
          <i class="el-icon-message-solid"></i>
        <span>消息提醒</span>
      </el-menu-item>
      <el-menu-item index="/main/person/complain">
          <i class="el-icon-phone"></i>
        <span>投诉反馈</span>
      </el-menu-item>
      <el-menu-item index="/main/person/basic">
        <i class="el-icon-notebook-2"></i>
        <span>基本信息</span>
      </el-menu-item>
      <el-menu-item index="/main/person/password">
        <i class="el-icon-notebook-2"></i>
        <span>密码修改</span>
      </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'SideBar',
  computed: {
    activeMenu() {
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.sidebar {
  background-color: #545c64;
  color: #fff;
  height: 100vh;
  overflow-y: auto;
}

.system-title {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #434a50;
}

.system-title h1 {
  margin: 0;
  font-size: 20px;
  color: #fff;
}

.subtitle {
  margin: 5px 0;
  font-size: 12px;
  color: #ccc;
}

.platform-name {
  margin: 5px 0 15px;
  font-size: 14px;
  color: #ffd04b;
}

.el-menu-vertical {
  border-right: none;
}
</style>